<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible="visible"
    :wrapStyle="{height: '100%',overflow: 'auto',paddingBottom: '108px'}"
    @close="close"
  >
    <a-form>
      <a-form-item label="所拥有的权限">
        <tree
          checkable
          :checkStrictly="checkStrictly"
          :treeData="treeData"
          :checkedKeys="checkedKeys"
          :expandedKeys="expandedKeys"
          @expand="onExpand"
          @check="onCheck"
          @select="onTreeNodeSelect"
        >
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}
            <a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(false)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(true)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkAll">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckAll">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作 <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>
    <role-data-rule-modal ref="datarule"></role-data-rule-modal>
  </a-drawer>
</template>

<script>
import { Tree } from 'ant-design-vue'
import RoleDataRuleModal from './RoleDataRuleModal'
import { apiQueryTreeListForRole, apiQueryRolePermission, apiSaveRolePermission } from '@/api/system'

export default {
  name: 'UserRoleModal',
  components: {
    Tree, RoleDataRuleModal
  },
  data () {
    return {
      title: '角色权限配置',
      visible: false,
      roleId: '',
      treeData: [],
      allTreeKeys: [],
      checkedKeys: [],
      defaultCheckedKeys: [],
      expandedKeys: [],
      checkStrictly: true,
      loading: false
    }
  },
  methods: {
    show (title, roleId) {
      this.title = title
      this.visible = true
      this.roleId = roleId
      this.loadData()
    },
    close () {
      this.visible = false
    },
    loadData () {
      apiQueryTreeListForRole().then((res) => {
        this.treeData = res.result.treeList
        this.allTreeKeys = res.result.ids
        apiQueryRolePermission({ roleId: this.roleId }).then((res) => {
          this.checkedKeys = res.result
          this.defaultCheckedKeys = res.result
          this.expandedKeys = this.allTreeKeys
        })
      })
    },
    onCheck (o) {
      console.log(o)
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    onTreeNodeSelect (id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
    },
    handleSubmit (exit) {
      const that = this
      const params = {
        roleId: that.roleId,
        permissionIds: that.checkedKeys.join(','),
        lastpermissionIds: that.defaultCheckedKeys.join(',')
      }
      that.loading = true
      console.log('请求参数：', params)
      apiSaveRolePermission(params).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        } else {
          that.$message.error(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        }
        this.loadData()
      })
    },

    /** 树操作 **/
    // 父子关联/取消
    switchCheckStrictly (v) {
      this.checkStrictly = v
    },
    // 全部勾选
    checkAll () {
      this.checkedKeys = this.allTreeKeys
    },
    // 取消全选
    cancelCheckAll () {
      this.checkedKeys = []
    },
    // 展开所有
    expandAll () {
      this.expandedKeys = this.allTreeKeys
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    // 合并所有
    closeAll () {
      this.expandedKeys = []
    }
  }
}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
